import React, {useRef, useState, memo, createRef, useEffect} from 'react';
import styles from './index.less';
import propTypes from 'prop-types'


Index.propTypes = {
    className: propTypes.string,
    onClick: propTypes.func,
    clickLeft: propTypes.func,
    clickRight: propTypes.func,
    imgList: propTypes.array.isRequired,
    style: propTypes.object,
    showText: propTypes.bool,
    number: propTypes.number,
    width: propTypes.number,
    imageHeight: propTypes.number,
    space: propTypes.number || propTypes.string,
}

function Index({
                   onClick,
                   clickLeft,
                   clickRight,
                   imgList = [],
                   className,
                   style = {},
                   showText = true, //展示描述文字
                   number = 4,  //可见的图片个数
                   width = 800,  //整个宽度
                   imageHeight = 200,  //图片高度
                   space = '1%',  //图片间隔
               }) {
    const ref = createRef();

    space = typeof space === 'string' && space.indexOf('%') !== -1 ? space : typeof space === 'number' ? space + 'px' : space


    const [translateX, setTranslateX] = useState(0); //每次偏移数值

    useEffect(() => {
        window.onresize = () => {
            setTranslateX(0)
        }
    }, []);

    /**
     * 点击右侧按钮
     */
    const clickRightIcon = (event) => {
        event.stopPropagation();
        if (ref.current.scrollWidth < (Math.abs(translateX) + Math.abs(ref.current.offsetWidth))) {//到最后一页时候需要停止点击按钮
            // setRightIconVisible(true);
            console.log('1')
            return;
        }
        setTranslateX(translateX - ref.current.offsetWidth); //每次滚动可见区域宽度
        clickRight && clickRight()
    };

    /**
     * 点击左侧按钮
     */
    const clickLeftIcon = (event) => {
        event.stopPropagation();
        if (translateX === 0) return;
        setTranslateX(translateX + ref.current.offsetWidth);
        // setRightIconVisible(false);
        clickLeft && clickLeft()
    };

    const getWidth = () => {
        return `calc((100% - ${space} * ${Number(number)}) / ${Number(number)})`
    }


    return (
        <div className={`${styles.wrap_scrollImg} ${className ? className : ''}`}
             style={Object.assign(style, {width, height: imageHeight + 60})}>
            <div className={styles.wrap_left_right_icon} style={{height: imageHeight}}>
                <span className={styles.left_icon} style={{lineHeight: imageHeight + 'px'}} onClick={clickLeftIcon}/>
                <span className={styles.right_icon} style={{lineHeight: imageHeight + 'px'}} onClick={clickRightIcon}/>
            </div>
            <ul style={{transform: `translateX(${translateX}px)`, width: `calc(100% + ${space})`}}
                ref={ref}>
                {imgList.map((item, index) => {
                    return (<li style={{marginRight: space, width: getWidth(), minWidth: getWidth()}}
                                key={index + item.name}>
                        <div className={styles.wrap_img}
                             style={{height: imageHeight, cursor: onClick ? 'pointer' : 'default'}}
                             onClick={() => onClick && onClick(item, index)}>
                            <img draggable={false} src={item.imgUrl} alt={item.name} style={{height: imageHeight}}/>
                        </div>
                        {showText && <div className={styles.wrap_text}>
                            <div className={styles.title}>
                                <a onClick={() => onClick && onClick(item, index)}
                                   style={{cursor: onClick ? 'pointer' : 'default'}}>
                                    {item.name}
                                </a>
                            </div>
                            <div className={styles.desc}>{item.desc}</div>
                        </div>}
                    </li>);
                })}
            </ul>
        </div>
    );
}

export default memo(Index);
